<script setup>
import GameCarouselItem from "@/components/FrontComponents/GameCarouselItem.vue";
import {gameCarouselGetAPI} from "@/api/FrontApi/game.js";
import {ref, onMounted} from 'vue'

const carouselData = ref([])

const getCarouselData = async () =>  {
  const res = await gameCarouselGetAPI({})
  carouselData.value = res.data
}

onMounted(() => getCarouselData())
</script>

<template>
  <div class="store-home">
    <div class="container">
      <span>精选和推荐</span>
      <el-carousel
          class="carousel"
          trigger="click"
          :interval="5000"
          height="353px"
          :motion-blur="true">
        <el-carousel-item class="item" v-for="item in carouselData" :key="item">
          <GameCarouselItem :game="item"></GameCarouselItem>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped lang="scss">
.store-home {
  margin: 40px 0;
  .container {
    span {
      margin-left: 100px;
      padding: 4px 6px;
      border-radius: 4px;
      background-color: $themeColor;
      box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }
    .carousel {
      padding: 10px 100px;
      .item {
        overflow: visible;
      }
    }
  }
}
</style>
